<template>
  <div class="pageWapper">
    <Header title="农网台区T节点前" />
    <div class="pageWapper_content">
      <Form @submit="onSubmit">
        <CellGroup inset>
          <Field
            v-model="serviceId"
            is-link
            readonly
            name="设备ID"
            label="设备ID"
            placeholder="请添加设备ID"
            :rules="[{ required: true, message: '请添加设备ID' }]"
            @click="openDialogFn('id')"
          />
          <Field
            is-link
            readonly
            name="电表号"
            label="电表号"
            @click="openDialogFn('number')"
          />
          <Popup v-model:show="showPicker" position="bottom">
            <Picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </Popup>
        </CellGroup>
        <div class="listBox">
          <div class="title">电表号列表</div>
          <List>
            <div class="listItem" v-for="item in electricityMeter" :key="item">
              <span>{{ item }}</span>
              <span @click="delElectricityMeterNumber(item)">删除</span>
            </div>
          </List>
        </div>
        <div class="bottomBtn">
          <Button round block type="primary" native-type="submit">
            下一步
          </Button>
        </div>
      </Form>
    </div>
  </div>
  <Dialog
    v-model:show="show"
    :title="dialogTitle"
    show-cancel-button
    @confirm="confirmOk"
  >
    <CellGroup inset>
      <div style="display: flex">
        <Field v-model="dialogInputValue" label="" placeholder="请输入" />
        <Button style="width: 100px" type="primary"> 扫一扫 </Button>
      </div>
    </CellGroup>
  </Dialog>
</template>

<script lang="ts" setup>
import Header from "@/components/Header.vue"
import { ref } from "vue"
import {
  Form,
  Field,
  CellGroup,
  Button,
  Popup,
  Picker,
  Dialog,
  List,
  showFailToast
} from "vant"
import { useRouter } from "vue-router"
import { useCreateExperiment } from "@/hooks/useCreateExperiment"

// const propsData = defineProps(["title"])

const { createExperimentDataFn, createExperimentData } = useCreateExperiment()

const show = ref(false)

const username = ref("")
const password = ref("")
const result = ref("")
const showPicker = ref(false)
const columns = [
  { text: "表前", value: "表前" },
  { text: "表箱前", value: "表箱前" },
  { text: "分支箱前", value: "分支箱前" },
  { text: "农网台区T节点", value: "农网台区T节点" }
]

// 添加设备ID
const dialogInputValue = ref("")
const dialogTitle = ref("")
const serviceId = ref("")
const electricityMeter = ref([])
const openDialogFn = (type) => {
  if (type === "id") {
    dialogTitle.value = "添加设备ID"
    dialogInputValue.value = serviceId.value
  } else {
    dialogTitle.value = "添加电表号"
    dialogInputValue.value = ""
  }
  show.value = true
}

const confirmOk = () => {
  if (dialogTitle.value === "添加设备ID") {
    serviceId.value = dialogInputValue.value
  } else {
    electricityMeter.value.push(dialogInputValue.value)
  }
}

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text
  showPicker.value = false
}

const $router = useRouter()
const onSubmit = (values) => {
  if (!electricityMeter.value.length) {
    showFailToast("请添加电表号")
    return
  }
  createExperimentDataFn({
    serviceId: serviceId.value,
    electricityMeter: electricityMeter.value,
    ...createExperimentData.value
  })
  console.log("submit", values)
  console.log("createExperimentData", createExperimentData)

  $router.push({
    path: "/createExperiment/electricMeterBox2"
  })
}

const delElectricityMeterNumber = (value) => {
  electricityMeter.value = electricityMeter.value.filter((i) => i !== value)
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
